<template>
    <!-- 标题栏 -->
    <van-row style="padding-top: 20px;padding-bottom: 20px; background-color: #add5a2">
        <van-col span="2" align="center" style="margin: auto 5px;">
            <van-icon name="arrow-left" :color="gobackColor" size="20" @click="goBack" 
                    @mouseover="gobackColor='#ddd'" @mouseout="gobackColor='white'"/>
        </van-col>
        <van-col span="5"></van-col>
        <van-col span="10" style="color: white;font-weight: 800;letter-spacing: 1px;font-size: larger;">
            欢迎使用饿了么
        </van-col>
        <van-col span="7"></van-col>
    </van-row>
    <!-- 通过底部标签切换显示不同组件 -->
    <router-view/>
    <!-- 底部标签页 -->
    <van-tabbar v-model="store.state.activeTab">
        <van-tabbar-item name="/main/home" icon="home-o">主页</van-tabbar-item>
        <van-tabbar-item name="/main/search" icon="search">发现</van-tabbar-item>
        <van-tabbar-item name="/main/order" icon="friends-o">订单</van-tabbar-item>
        <van-tabbar-item name="/main/user" icon="setting-o">我的</van-tabbar-item>
    </van-tabbar>
</template>

<script setup>
import {ref,watch,getCurrentInstance, onMounted, computed} from 'vue';
import store from '@/store';

   const {proxy} = getCurrentInstance();

   //用户点击切换导航时共享变量会更新 active也会更新
const active = computed(()=>{
    return store.state.activeTab;
})

 //监听到active的变化 就做路由跳转
 watch(active,(newValue,oldValue)=>{
    proxy.$router.push(active.value);
 })

 const goBack = ()=>{
    window.history.go(-1);
 }

 const gobackColor = ref('white');


</script>

<style>
</style>